<!--
 * @Author: 肖芬芳 10547202+xiao-fenfang@user.noreply.gitee.com
 * @Date: 2022-07-19 09:24:49
 * @LastEditors: 肖芬芳 1911683843@qq.com
 * @LastEditTime: 2022-11-30 10:38:34
 * @FilePath: \vue-api-serverc:\Users\Administrator\Desktop\vite-project\src\views\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 页面布局 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <div class="title">
          <span>博客管理系统</span>
        </div>
        <div class="function">
          <!-- 功能模块 -->
          <MessageIco />
          <FullScreenIco />
          <RefreshIco />
          <ReturnIco />
          {{ user }}
          <PersonInfoIco />
        </div>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside>
          <Menu />
        </el-aside>
        <!-- 右侧主体部分 -->
        <el-main>
          <!-- 子路由填充位置 -->
          <Nav />
          <div style="margin: 10px;background-color: #FFFFFF;padding: 20px;height: auto;">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
// ----------- 引入组件-------------
// 导入菜单栏
import Menu from "./components/Menu.vue";
// 导入导航栏
import Nav from "./components/Nav.vue";
// 功能组件
import FullScreenIco from "./components/FullScreenIco.vue";
import MessageIco from "./components/MessageIco.vue";
import RefreshIco from "./components/RefreshIco.vue";
import ReturnIco from "./components/ReturnIco.vue";
import PersonInfoIco from "./components/PersonInfoIco.vue";
import { store } from "@/store";
const user = store.state.user?.username;
console.log(user);
</script>

<style lang="scss" scoped>
.el-container {
  height: 100vh;
}

.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #011528;
  font-size: 20px;
  color: #fff;
  text-align: center;
  // line-height: 60px;
  padding-left: 0 !important;
  overflow: hidden;
  .title {
    padding-left: 10px;
    color: #409eff;
  }
}

.el-aside {
  width: auto;
  background-color: #011528;
  overflow: hidden;
}

.el-main {
  width: 100%;
  height: 100%;
  background-color: #e9eef3;
  color: #333;
  padding: 0;
  margin: 0;
}
</style>
